<template>
    <div class="member-main">
      <el-container>
        <el-header class="header">
          <div class="header-left">
            <i class="el-icon-s-operation menu-toggle" @click="toggleCollapse" />
            <span class="logo">健身房会员系统</span>
          </div>
          <div class="header-right">
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                <el-avatar size="small" style="background-color: #ccc;">
                  {{ username.charAt(0).toUpperCase() }}
                </el-avatar>
                <span class="username-text">{{ username }}</span>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>
  
        <el-container>
          <el-aside :width="isCollapse ? '64px' : '200px'" class="aside">
            <el-menu :default-active="$route.path" router :collapse="isCollapse" class="menu">
              <el-menu-item index="/MemberMain/MemberInfo">
                <i class="el-icon-user"></i>个人信息
              </el-menu-item>
              <el-menu-item index="/MemberMain/MemberClassInfo">
                <i class="el-icon-date"></i>课程信息
              </el-menu-item>
              <el-menu-item index="/MemberMain/MemberOrderClass">
                <i class="el-icon-edit-outline"></i>课程报名
              </el-menu-item>
              <el-menu-item index="/MemberMain/MemberGoods">
                <i class="el-icon-goods"></i>商品列表
              </el-menu-item>
              <el-menu-item index="/MemberMain/MemberCart">
                <i class="el-icon-shopping-cart-2"></i>购物车
              </el-menu-item>
              <el-menu-item index="/MemberMain/GoodsOrderInfo">
                <i class="el-icon-shopping-cart-2"></i>我的订单
              </el-menu-item>
            </el-menu>
          </el-aside>
  
          <el-container direction="vertical" class="content-container">
            <!-- <div class="main-content-with-bg">
              <img src="/img/background.jpeg" alt="会员主页背景" class="background-image" />
            </div> -->
            <router-view></router-view>
            <el-footer class="footer">
              <div>你好！会员</div>
              <div>Copyright © Curry 2025</div>
            </el-footer>
          </el-container>
        </el-container>
      </el-container>
    </div>
  </template>
  
  <script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import axios from 'axios'

const isCollapse = ref(false)
const router = useRouter()

// 用户名，默认是“会员”
const username = ref('')

// 页面加载时从后端获取用户名

onMounted(() => {
  axios.get('/server/member/getMyInfo',{
    headers: {
      'Authorization': localStorage.getItem('token')
    }
  }).then(res => {
    if(res.data.code === 200){
      username.value = res.data.data.memberName
    }else {
      ElMessage.error('无法获取用户名')
    }
  }).catch(() => {
    ElMessage.error('请求数百，无法获取用户名')
  })

})

const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value
}

// 处理下拉菜单
const handleCommand = (command) => {
  if (command === 'logout') {
    axios.post('/server/Member/MemberLogout',null,{
      headers: {
        'Authorization': localStorage.getItem('token')
      },
      withCredentials: true//跨域凭证
    }).then((res) => {
      if(res.data.code === 200) {
        router.push('/MemberLogin')
        ElMessage.success('退出成功')
      }
    }).catch(() => {
      ElMessage.error('退出登录失败')
    })
  }
}
</script>

  
  <style scoped>
  html, body, #app, .member-main {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  
  .el-container {
    height: 100%;
  }
  
  .header { 
    display: flex; 
    align-items: center; 
    background: #343a40; 
    color: white; 
    height: 50px; 
    padding: 0 15px; 
  }
  .header-left { display: flex; align-items: center; gap: 10px; }
  .header-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
  .logo { font-weight: bold; font-size: 16px; }
  .menu-toggle { font-size: 20px; cursor: pointer; }
  .username-text { margin-left: 5px; font-size: 14px; color: white; }
  
  .aside { background: #ffffff; border-right: 1px solid #ddd; }
  .menu { font-size: 14px; border-right: none; }
  
  .content-container {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  
  .main-content-with-bg {
    flex: 1;
    position: relative;
    overflow: hidden;
  }
  
  .background-image {
    width: 100%;
    height: calc(100vh - 120px); /* header+footer 大约 120px */
    object-fit: cover;
    display: block;
  }
  
  .footer {
    height: 70px;
    background: #ffffff;
    color: #6c757d;
    text-align: center;
    font-size: 13px;
    padding-top: 20px;
  }
  </style>
  